<template>
    <div class="header-bar">
        <div class="header-spacer"></div>
        <h1 class="header-title">数智工班看板</h1>
        <div class="datetime-display">{{ currentDateTime }}</div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const currentDateTime = ref('');
let timeTimer = null;
const formatDateTime = () => {
    const date = new Date();
    const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    };
    return date.toLocaleString('zh-CN', options);
};
onMounted(() => {
    currentDateTime.value = formatDateTime();
    timeTimer = setInterval(() => {
        currentDateTime.value = formatDateTime();
    }, 1000);
});
onUnmounted(() => {
    if (timeTimer) {
        clearInterval(timeTimer);
    }
});
</script>
<style scoped>
.header-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background-image: url('/dashboard/images/head_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.header-spacer {
    flex: 1;
}

.header-title {
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    text-align: center;
}

.datetime-display {
    color: #fff;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    flex: 1;
    text-align: right;
}

@media (max-width: 1200px) {
    .header-title {
        font-size: 2.2rem;
    }

    .datetime-display {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .header-title {
        font-size: 1.2rem;
    }

    .datetime-display {
        font-size: 0.8rem;
    }

    .header-bar {
        padding: 0 10px;
    }
}
</style>